<template>
  <view class="content">
    <view class="toPage" :style="headBoxStyle" @click="toPage">
      <uni-icons type="left" size="30" color="#fff"></uni-icons>
    </view>
    <view class="box" :class="['image','video'].includes(file.type)?'box-fixed':''">
      <view class="template">
        <template5 v-if="id===5" ref="template"></template5>
        <template1 v-if="id===1" ref="template"></template1>
        <template2 v-if="id===2" ref="template"></template2>
        <template3 v-if="id===3" ref="template"></template3>
        <template4 v-if="id===4" ref="template"></template4>
      </view>
    </view>
    <view class="button" @click="update" v-if="!['image','video'].includes(file.type)">
      <image :src="image_host+'tab_yaoqing.png'"></image>
    </view>
    <view class="message" v-if="!['image','video'].includes(file.type)">
      <view>{{ title }}</view>
      <view>推荐上传：门店合影、店长合影、旅游合影等</view>
    </view>
    <view class="button-fixed" @click="add" v-if="['image','video'].includes(file.type)">
      制作好了去发布
    </view>
  </view>
</template>

<script>
import Template5 from "@/mediaContainer/components/template5.vue";
import Template1 from "@/mediaContainer/components/template1.vue";
import Template2 from "@/mediaContainer/components/template2.vue";
import Template3 from "@/mediaContainer/components/template3.vue";
import Template4 from "@/mediaContainer/components/template4.vue";
import AnswerLoading from "@/pages/newAnswer/components/answer-loading.vue";

export default {
  components: {AnswerLoading, Template5, Template1, Template2, Template3, Template4},
  data() {
    return {
      image_host: this.image_host + 'template/',
      headBoxStyle: "padding-top: " + uni.getStorageSync('menuInfo').menuTop,
      file: {
        type: "",
        url: "",
        thumbUrl: ""
      },
      id: "",
      title: ""
    };
  },
  onShow() {
  },
  onLoad({templateId, title}) {
    this.id = parseInt(templateId);
    this.title = title;
  },
  methods: {
    async update() {
      let _this = this;
      uni.chooseMedia({
        count: 1, // 最多选择的文件数量
        mediaType: ['image', 'video'], // 文件选择的类型，可以是图片、视频
        sourceType: ['album', 'camera'], // 文件选择的来源，可以是相册、相机
        success: (res) => {
          _this.file = {
            type: res.type,
            url: res.type === 'video' ? res.tempFiles[0].tempFilePath : res.tempFiles[0].tempFilePath,
            thumbUrl: res.type === 'video' ? res.tempFiles[0].thumbTempFilePath : ''
          }
          _this.$refs.template.update(_this.file)
          _this.$javaCircle.doRequest("get", 'circle/customer/say/updateSayImageTemplate', {id: _this.id}, '')
        }
      })
    },
    toPage() {
      uni.navigateBack()
    },
    add() {
      uni.$emit("uploadFile", {file: this.file, templateId: this.id});
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss">
page {
  height: 100%;
}

.content {
  width: 100%;
  height: 100%;
  background-color: #3F3E43;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.toPage {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
}

.box {
  width: 418upx;
  height: 742upx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 286upx;
  transition: all .3s linear;


  .template {
    width: 750upx;
    height: 100vh;
    transform: scale(.5);
    transition: all .3s linear;
  }
}

.box-fixed {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  margin-top: 0upx;
  transform: translate(-50%, -50%);


  .template {
    width: 100%;
    height: 100%;
    transform: scale(1);
    display: flex;
    align-items: center;
  }
}

.button {
  width: 478upx;
  height: 110upx;
  margin-top: 98upx;

  image {
    width: 100%;
    height: 100%;
  }
}

.message {
  width: 690upx;
  background-color: #fff;
  border-radius: 12upx;
  box-sizing: border-box;
  padding: 20upx 24upx;
  margin-top: 50upx;

  view:nth-child(1) {
    font-size: 46upx;
    color: #000000;
  }

  view:nth-child(2) {
    font-size: 38upx;
    color: #000000;
  }

}

.button-fixed {
  width: 478upx;
  height: 110upx;
  position: fixed;
  left: 50%;
  bottom: 100upx;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #6EE46B 0%, #66CB66 100%);
  box-shadow: 0px 4upx 12upx 0px rgba(0, 0, 0, 0.12), inset 0px -2px 7px 0px #25A401;
  border-radius: 45upx;
  font-size: 52upx;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 110upx;
  text-align: center;
  text-shadow: 0px 2upx 9upx #50A25E;
}
</style>
